<div class="data-download-container  action-type-container">
    <ul class="data-download-nav">

        <li class="nav-item ">
            <button type="button" class="btn-link reports  active-section" data-section="reports">Reports</button>
        </li>
        <li class="nav-item">
            <button type="button" class="btn-link problem-report" data-section="problem">Problem Report</button>
        </li>
        <li class="nav-item">
            <button type="button" class="btn-link certificates" data-section="certificate">Certificates</button>
        </li>
        <li class="nav-item">
            <button type="button" class="btn-link grading" data-section="grading">Grading</button>
        </li>

    </ul>
    <section id="reports" class="idash-section tab-data" aria-labelledby="header-reports">
        <h6 class="mb-15" id="header-reports">
            <strong>${_("NOTE")}: </strong>
            Please select the report type and then click Download Report button
        </h6>
        <div class="mb-15">

            <div class="mb-5">
                <select class="report-type selector">
                    <option value="gradingConfiguration"
                            data-endpoint="">
                        Grading Configuration
                    </option>
                    <option value="listAnonymizeStudentIDs" data-endpoint=""
                            class=""
                            aria-disabled="">Anonymized Student IDs
                    </option>
                    <option value="profileInformation"
                            data-endpoint=""
                            data-csv="true">Profile Information
                    </option>
                    <option value="learnerWhoCanEnroll"
                            data-endpoint="" data-csv="true">
                        Learner
                        who can enroll
                    </option>
                    <option value="listEnrolledPeople"
                            data-endpoint="">
                        List enrolled students profile information
                    </option>
                    <option value="proctoredExamResults"
                            data-endpoint="">Proctored exam results
                    </option>
                    <option value="surveyResultReport"
                            data-endpoint="">
                        Survey Result report
                    </option>
                    <option value="ORADataReport" data-graderelated="true"
                            data-endpoint="">ORA Data
                        report
                    </option>
                    <option data-graderelated="true" value="problemGradeReport"
                    data-endpoint="">Problem Grade report
                    </option>
                </select>
                <button class="btn-brand download-report" type="button" value="download report">Download
                    report
                </button>
            </div>

        </div>

        <div>
            <p class="selectionInfo gradingConfiguration">${_("Click to display the grading configuration for the \
                course. The grading configuration is the breakdown of graded subsections of the course \
                (such as exams and problem sets), and can be changed on the 'Grading' \
                page (under 'Settings') in Studio.")}</p>
            <p hidden="hidden" class="selectionInfo listAnonymizeStudentIDs">${_("Click to download a CSV of \
                anonymized student IDs:")}</p>

            <p hidden="hidden" class="selectionInfo reports"> ${_("For large courses, generating some reports can take \
                several hours. When report generation is complete, a \
                link that includes the date and time of generation appears in the table below. These reports are \
                generated in the background, meaning it is OK to navigate away from this page while your report is \
                generating.")}</p>

            <p hidden="hidden" class="selectionInfo reports">${_("Please be patient and do not click these buttons \
                multiple times. Clicking these buttons multiple times will significantly slow the generation \
                process.")}
            </p>
            <p hidden="hidden" class="selectionInfo listEnrolledPeople">${_("For smaller courses, click to list \
                profile information for enrolled students directly on this page:")}</p>
            <p hidden="hidden" class="selectionInfo reports profileInformation">${_("Click to generate a CSV file of \
                all students enrolled in this course, along with profile information such as email address and \
                username:")}</p>

            <p hidden="hidden" class="selectionInfo reports learnerWhoCanEnroll">${_("Click to generate a CSV file \
                that lists learners who can enroll in the course but have not yet done so.")}</p>

            <p hidden="hidden" class="selectionInfo reports proctoredExamResults">${_("Click to generate a CSV file \
                of all proctored exam results in this course.")}</p>

            <p hidden="hidden" class="selectionInfo reports surveyResultReport">${_("Click to generate a CSV file of \
                survey results for this course.")}</p>
        </div>

    </section>
    <section id="certificate" class="idash-section tab-data" aria-labelledby="header-cert">
        <h6 class="mb-15" id="header-cert">
            <strong>${_("NOTE")}: </strong>
            Please select the report type and then click Download Report button
        </h6>

        <select class="report-type selector">
            <option value="viewCertificates" data-csv="false"
                    data-endpoint="">View certificates
            </option>
            <option value="downloadCertificates" data-csv="true"
                    data-endpoint="">Download csv of
                certificates
            </option>
        </select>
        <button  class="mb-20 btn-brand download-report" type="button" value="download report">Download
            report
        </button>
        <div>
            <p>${_("Click to list certificates that are issued for this course:")}</p>
        </div>
    </section>
    <section id="problem" class="idash-section tab-data" aria-labelledby="header-problem">
        <h6 class="mb-20" id="header-problem">
            ${_("Select a problem to generate a CSV \
            file that lists all student answers to the problem. You also select a section or chapter to include \
            results of all problems in that section or chapter.")}
        </h6>
        <div class="mb-15 problems">
            ${static.renderReact(
            component="ProblemBrowser",
            id="react-block-listing",
            props={
            "courseId": course.id,
            "excludeBlockTypes": ['html', 'video', 'discussion']
            }
            )}
        </div>
        <button data-endpoint="" id="download-problem-report"
                class="btn-brand mb-20" type="button" value="download report">Download
            report
        </button>
        <p class="mb-15">
            <strong>${_("NOTE")}: </strong>
            ${_("The generated report is limited to {max_entries} responses. If you expect more than {max_entries} "
            "responses, try generating the report on a chapter-by-chapter, or problem-by-problem basis, or contact "
            "your site administrator to increase the limit.").format(max_entries=max_entries)}
        </p>
    </section>
    <section id="grading" class="idash-section tab-data" aria-labelledby="header-grading">
        <h6 class="mb-15" id="header-grading">
            <strong>${_("NOTE")}: </strong>
            Please select the report type and then click Download Report button
        </h6>
        <br>

        <p>Learner status</p>
        <select class="learner-status selector">
            <option value="true">Verified Learners Only</option>
            <option value="false">All Learners</option>
        </select>

        <button class="mb-20 btn-brand grade-report-download" type="button"
                value="download report"
                data-endpoint="">Download Report
        </button>
        <div>
            <p>${_("Click to generate a CSV grade report for all currently enrolled students.")}</p>
        </div>
    </section>
    <div class="request-response message msg-confirm copy" id="report-request-response"></div>
    <div class="request-response-error message msg-error copy" id="report-request-response-error"></div>

</div>

<div class="reports-download-container action-type-container">
    <div class="data-display-text" id="data-grade-config-text"></div>
    <div class="data-display-table profile-data-display-table" id="data-student-profiles-table"></div>
    <div class="data-display-table data-display-table-holder" id="data-issued-certificates-table"></div>
    <hr>

    <h3 class="hd hd-3">${_("Reports Available for Download")}</h3>
    <p>
        ${_("The reports listed below are available for download, identified by UTC date and time of generation.")}
    </p>

    <p>
        ${_("The answer distribution report listed below is generated periodically by an automated background process. \
        The report is cumulative, so answers submitted after the process starts are included in a subsequent report. \
        The report is generated several times per day.")}
    </p>
    <p>
        ${Text(_("{strong_start}Note{strong_end}: {ul_start}{li_start}To keep student data secure, you cannot save or \
        email these links for direct access. Copies of links expire within 5 minutes.{li_end}{li_start}Report files \
        are deleted 90 days after generation. If you will need access to old reports, download and store the files, \
        in accordance with your institution's data security policies.{li_end}{ul_end}")).format(
            strong_start=HTML("<strong>"),
            strong_end=HTML("</strong>"),
            ul_start=HTML("<ul>"),
            ul_end=HTML("</ul>"),
            li_start=HTML("<li>"),
            li_end=HTML("</li>"),
        )}
    </p><br>

    <div class="report-downloads-table" id="report-downloads-table"
         data-endpoint=""></div>

</div>
<div id="data_download_2" class="running-tasks-container action-type-container">
    <hr>
    <h3 class="hd hd-3">${_("Pending Tasks")}</h3>
    <div class="running-tasks-section">
        <p>${_("The status for any active tasks appears in a table below.")} </p>
        <br/>
        <div class="running-tasks-table" data-endpoint=""></div>
    </div>
    <div class="no-pending-tasks-message"></div>
</div>

